<template>
    <div ref="detailInteractionRef" class="detail-interaction">
        <el-card class="statistics-card" shadow="never">
            <template #header>
                <div class="card-header">
                    <span class="statistics-title card-title">成员互动TOP10</span>
                </div>
            </template>
            <div v-if="detailInteractionFlag" class="card-content">
                <div class="Piller_button">
                    <el-radio-group
                        v-model="radioType"
                        class="ml-4"
                        text-color="#FFFFFF"
                        fill="#FF6B00"
                        @change="memberChange">
                        <el-radio-button :label="1">点赞数</el-radio-button>
                        <el-radio-button :label="2">评论数</el-radio-button>
                        <el-radio-button :label="3">评论人数</el-radio-button>
                    </el-radio-group>
                </div>
                <div class="PillerEcharts">
                    <PillarEcharts
                        v-if="detailInteractionData.length"
                        :top-echarts="detailInteractionData[radioType - 1].data" />
                    <div v-else class="no_data">
                        <img class="no_img" src="@/assets/noData.png" alt="" />
                        <div class="emty_title font-style">暂无数据</div>
                    </div>
                </div>
            </div>
            <el-skeleton v-else :rows="4" animated />
        </el-card>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useRoute } from 'vue-router';
import { useLazyData } from '@/hooks/commonHooks';
import PillarEcharts from './PillarEcharts.vue';
import { massTop } from '@/api/friendcircle';

const route = useRoute();
const routeQuery = route.query;
const detailInteractionRef = ref<null | (InstanceType<typeof HTMLDivElement> & any)>(null);

useLazyData(detailInteractionRef, () => initData());

const detailInteractionFlag = ref<boolean>(false);
const detailInteractionData = ref<any[]>([
    { flag: false, data: [] },
    { flag: false, data: [] },
    { flag: false, data: [] }
]);
const radioType = ref<number>(1);

/**
 * @description: 获取点赞评论数
 * @return {*}
 */
const memberChange = () => {
    if (detailInteractionData.value[radioType.value - 1].flag) return;
    detailInteractionFlag.value = false;
    const { id: send_moment_id } = routeQuery;
    const params = {
        send_moment_id,
        type: radioType.value
    };
    massTop(params, true).then((res: any) => {
        detailInteractionData.value[radioType.value - 1].flag = true;
        detailInteractionData.value[radioType.value - 1].data = res;
        detailInteractionFlag.value = true;
    });
};

const initData = () => {
    memberChange();
};
</script>

<style lang="scss" scoped>
.detail-interaction {
    margin-bottom: 18px;

    .font-style {
        white-space: nowrap;
        font-size: 14px;
        color: #444;
    }

    .card-title {
        white-space: nowrap;
        font-size: 16px;
        color: #444;
        font-weight: 500;
    }

    .statistics-card {
        .card-header {
            display: flex;
            align-items: center;
            gap: 6px;

            .statistics-title {
            }

            :deep(.tip-text) {
                width: 100px;

                .tip-text-item {
                }
            }

            .el-image {
                width: 20px;
                height: 20px;
            }
        }

        .card-content {
            .PillerEcharts {
                .no_data {
                    height: 300px;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    gap: 60px;

                    .emty_title {
                        font-size: 12px;
                        color: #888;
                    }
                }
            }
        }
    }
}
</style>
